<template>
  <div class="greenhouse">
    <!-- 按钮 -->
    <div class="btns" >
      <!-- {{name}} -->
      <el-form size="small" inline >
        <el-form-item label="名称" >
      <el-input v-model="param.name"></el-input>
        </el-form-item>
      <el-button type="primary" round size="small" icon="el-icon-search" @click="loadgreenhouse">搜索</el-button>
      <div>
        <el-form-item style="float:right">
      <el-button type="primary" round size="small" @click="toUploadHandler" style="float:right"  ><i class="el-icon-upload el-icon--left"></i>新增</el-button>
      <el-button size="small" @click="delArray()" type="danger" round style="float:right" ><i class="el-icon-delete"></i>批量删除</el-button>
      <el-button size="small" @click="toggleSelection()" type="info" round style="float:right" ><i class="el-icon-remove-outline"></i>取消选择</el-button>
      <el-button size="small" type="primary" round @click="downloadHandler" style="float:right"><i class="el-icon-bottom"></i>导出</el-button>
        </el-form-item>
        </div>
      </el-form>
            <!-- <div class="btns">
        <el-button type="primary" size="small" @click="toUploadHandler">上传</el-button>
      </div> -->
 
     
   
      
    </div>
    <!-- /按钮 -->
    <!-- {{greenhouse}} -->
    <!-- 表格 -->
      <el-table size="small" :data="greenhouse" ref="multipleTable">
        <el-table-column type="selection" width="65"></el-table-column>
        <!-- <el-table-column type="index" :index="1" label="序号"></el-table-column> -->
      <el-table-column type="index" :index="1" label="序号"></el-table-column>
        <el-table-column label="名称" prop="name" align="center"></el-table-column>
        <el-table-column label="状态" prop="status" align="center"></el-table-column>
        <el-table-column label="温度" prop="temperature" align="center"></el-table-column>
        <el-table-column label="空气湿度" prop="airHumidity" align="center"></el-table-column>
        <el-table-column label="土壤湿度" prop="soilHumidity" align="center"></el-table-column>
        <el-table-column label="照片" prop="photo" align="center" width="140px">
                <template slot-scope="scope">
          <div style="width:100px;border-radius:5px;height:80px;over-flow:hidden" >
            <img :src='"http://47.106.244.1:8888/group1/"+scope.row.photo' alt="" style="width:100%">
          </div>
        </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="createTime" align="center"></el-table-column>
        <el-table-column label="USER_ID" prop="userId" align="center"></el-table-column>
         <!-- 定制插槽 -->
      <el-table-column label="操作" width="180" align="center">
        <template slot-scope="scope">
        <el-button type="danger" round size="small" @click="deleteHandler(scope.row)"  icon="el-icon-delete" >移除</el-button>
        <el-button type="success" round size="small" @click="editHandler(scope.row)" icon="el-icon-edit" >修改</el-button>
        </template>
    </el-table-column>
    </el-table>
    <!-- /表格 -->

    <!-- 模态框 -->
    <el-dialog title="添加图片" :visible.sync="visible" width="40%" >
      <el-form size="small" :model="param" label-width="80px">
        <!-- {{param}} -->
        <el-form-item label="图片">
          <el-upload
            action="http://47.106.244.1:7788/file/upload"
            list-type="picture-card"
            :on-success="uploadSuccessHandler"
            :file-list="fileList">
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
     <el-form-item label="名称">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-input  v-model="form.status"></el-input>
      </el-form-item>
      <el-form-item label="温度">
        <el-input v-model="form.temperature" ></el-input>
      </el-form-item>
            <el-form-item label="空气湿度">
        <el-input v-model="form.airHumidity" ></el-input>
      </el-form-item>
      <el-form-item label="土壤湿度">
        <el-input v-model="form.soilHumidity" ></el-input>
      </el-form-item>
      <el-form-item label="创建时间">
        <el-input v-model="form.createTime" ></el-input>
      </el-form-item>
      <el-form-item label="USER_ID">
        <el-input v-model="form.userId" ></el-input>
      </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="visible = false">取 消</el-button>
        <el-button type="primary" size="small" @click="submitHandler">确 定</el-button>
      </span>
    </el-dialog>


  </div>
</template>
<script>

import{del,get,post}from '@/utils/request'
export default {
    data(){
    return {
      visible:false,
      files:[],
      fileList:[],
      form:{},
      //检索
      greenhouseAmount: [],
      param:{},
      greenhouse:[],
      multipleSelection: [],
    };
  }, 
 // 所有的方法
  methods:{
    //导出
        downloadHandler(){
      window.location.href = "http://121.196.106.124:8888/greenhouse_greenhouse/download?name="+this.param.name
    },

    // 上传成功的处理函数
    uploadSuccessHandler(resp){
      if(resp.status == 200){
        // 将photo填充到form中，待会保存的时候提交给后台
        let photo = resp.data.id;
        this.form = {
          ...this.form,
          photo
        }
      } else {
        this.$message({type:"error",message:resp.message})
      }
    },
    submitHandler(){
      let url = "http://121.196.106.124:8888/greenhouse_greenhouse/saveOrUpdate"
      post(url,this.form).then(resp => {
        // 关闭模态框
        this.visible = false;
        // t提示
        this.$message({type:"success",message:resp.message})
        // 重载数据
        this.loadgreenhouse();
      })
    },


toUploadHandler(){
      this.form = {id : this.id}
      this.fileList = []; // 防止下次上传的时候保留图片信息
      this.visible = true;

},

// 批量清除
delArray (){
var that = this
      // 拿到选中的数据；
var val = this.greenhouseAmount
      // 如果选中数据存在
if (val){
  // 将选中数据遍历
        val.forEach(function (item, index){
          // 遍历源数据
          that.greenhouse.forEach(function (itemI, indexI){
             // 如果选中数据跟元数据某一条标识相等，删除对应的源数据
             if (item.name === itemI.name){
               that.greenhouse.splice(indexI, 1)
             }
          })
        })
} 
// 清除选中状态     
this.$refs.multipleTable.clearSelection()
},

    toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
        editHandler(row){
      // 跳转到修改页面 （新增页面）
      // 携带当前行的数据
      this.$router.push({
        path:"/Interfaces/Greenhouse_create",    //跳转的路由（前端）
        query:row   // 携带参数
      })
    },

        // 删除事件处理函数
    deleteHandler(row) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let url = "http://121.196.106.124:8888/greenhouse_greenhouse/deleteById";
        del (url, { id: row.id }).then((resp) => {
          this.$message({ type: "success", message: resp.message });
         this.loadgreenhouse();
        });
      });
    },

    //跳转
        toAddHandler() {
      this.$router.push("/greenhouse/create");
    },
    loadgreenhouse(){
      let url = "http://121.196.106.124:8888/greenhouse_greenhouse/query"
      get(url,this.param).then((resp)=>{
        this.greenhouse = resp.data;
      })
    }
    },
    
    // 页面渲染的时候会调用的函数
  created(){
    this.loadgreenhouse();
  },
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<!--这么设计的目的是父组件可以对子组件根元素进行布局。-->
<style scoped>
 .btns{
   margin-bottom: 0.5em;
 }

</style>
